<#assign baseURL = springMacroRequestContext.getContextPath() />
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拓深科技</title>
<#include "./css.ftl">
</head>
<body>
<div id="wrapper">

<#include "./left_nav.ftl">

    <div id="page-wrapper" class="gray-bg dashbard-1">
    <#include "./top_nav.ftl">
        <div class="row wrapper border-bottom white-bg page-heading">
            <div class="col-lg-9">
                <h2>报警事件</h2>
                <ol class="breadcrumb">
                    <li>
                        消防用水管理系统
                    </li>
                    <li class="active">
                        报警事件
                    </li>
                </ol>
            </div>
        </div>

        <div class="wrapper wrapper-content">
            <div class="">
                <div class="">
                    <div class="tabs-container">
                        <ul class="nav nav-tabs">
                            <li class="active"><a data-toggle="tab" href="/water/view/alarm_event#tab-1">未确认</a> </li>
                            <li class=""><a data-toggle="tab" href="/water/view/alarm_event#tab-2">已确认</a> </li>
                        </ul>
                        <div class="tab-content">
                            <div id="tab-1" class="tab-pane active">
                                <div class="panel-body">
                                    <div >
                                        <button id="refreshAlarm" type="button" style="margin-bottom: 10px;" class="btn  btn-primary"><i class="fa fa-refresh"></i>&nbsp;&nbsp;刷新数据</button>
                                    </div>
                                    <table class="table table-striped table-bordered table-hover " id="alarmEventTable" cellspacing="0" width="100%">
                                        <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>报警时间</th>
                                            <th>区域</th>
                                            <th>建筑物</th>
                                            <th>楼层</th>
                                            <th>主机名称</th>
                                            <th>主机IP</th>
                                            <th>主机通道</th>
                                            <th>监测点名称</th>
                                            <th>报警类型</th>
                                            <th>报警数据</th>
                                            <th>单位</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div id="tab-2" class="tab-pane">
                                <div class="panel-body">
                                    <div >
                                        <button id="refreshAlarmNoConfirm" type="button" style="margin-bottom: 10px;" class="btn  btn-primary"><i class="fa fa-refresh"></i>&nbsp;&nbsp;刷新数据</button>
                                    </div>
                                    <table class="table table-striped table-bordered table-hover " id="alarmEventConfirmTable" cellspacing="0" width="100%">
                                        <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>报警时间</th>
                                            <th>确认时间</th>
                                            <th>区域</th>
                                            <th>建筑物</th>
                                            <th>楼层</th>
                                            <th>主机名称</th>
                                            <th>主机IP</th>
                                            <th>主机通道</th>
                                            <th>监测点名称</th>
                                            <th>报警类型</th>
                                            <th>报警数据</th>
                                            <th>单位</th>
                                            <th>确认用户</th>
                                        </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

    <#include "./bottom_nav.ftl">
    </div>

</div>


<#include "./js.ftl">
<script src="assets/layer/layer.js"></script>
<script>

    $("#refreshAlarm").on("click",function(){
        alarmEventTable.ajax.reload();
    });

    $("#refreshAlarmNoConfirm").on("click",function(){
        alarmEventConfirmTable.ajax.reload();
    });

    var alarmEventTable = $('#alarmEventTable').DataTable({
        language: {
            "sProcessing": "处理中...",
            "sLengthMenu": "显示 _MENU_ 项结果",
            "sZeroRecords": "没有匹配结果",
            "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
            "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
            "sInfoPostFix": "",
            "sSearch": "搜索IP:",
            "sUrl": "",
            "sEmptyTable": "表中数据为空",
            "sLoadingRecords": "载入中...",
            "sInfoThousands": ",",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上页",
                "sNext": "下页",
                "sLast": "末页"
            },
            "oAria": {
                "sSortAscending": ": 以升序排列此列",
                "sSortDescending": ": 以降序排列此列"
            }
        },
        ajax: "${baseURL}/water/alarm_event/getData",
        columns:[
            {"data":"id"},
            {"data":"unix_time","render":function(data, type, row, meta){
                return showTime(data);
            }},
            {"data":"area"},
            {"data":"building"},
            {"data":"floor"},
            {"data":"device_name"},
            {"data":"device_ip"},
            {"data":"channel_number"},
            {"data":"monitor_name"},
            {"data":"alarm_type"},
            {"data":"alarm_data"},
            {"data":"unit"},
            {"data":"user","render":function(data, type, row, meta){
                var obj = encodeURIComponent(JSON.stringify(row));
                return   '<div class="col-sm-12" style="padding: 0 0 0 0;"><button onclick='+"confirmChannelBtn("+'"'+obj+'"'+")"+ ' type="button" class="btn btn-block btn-success" style="padding: 0 0 0 0;"><i class="fa fa-dot-circle-o"></i>&nbsp;&nbsp;确认报警</button></div>'
//                这里的确认报警就是确认整个通道
//                return   '<div class="col-sm-12" style="padding: 0 0 0 0;"><div class="col-sm-6" style="padding: 0 2px 0 0;"><button onclick='+"confirmChannelBtn("+'"'+obj+'"'+")"+ ' type="button" class="btn btn-block btn-success" style="padding: 0 0 0 0;"><i class="fa fa-dot-circle-o"></i>&nbsp;&nbsp;确认通道</button></div> <div class="col-sm-6" style="padding: 0 2px 0 0;"><button onclick="confirmOneBtn('+row.id+')" type="button" class="btn btn-block btn-info" style="padding: 0 0 0 0;"><i class="fa fa-check-square-o"></i>&nbsp;&nbsp;确认当前记录</button></div></div>'
            },"width":"8%"}
        ],
        searching:false,
        destroy: true,
        serverSide: true,
        ordering:false
    });

    var alarmEventConfirmTable = $('#alarmEventConfirmTable').DataTable({
        language: {
            "sProcessing": "处理中...",
            "sLengthMenu": "显示 _MENU_ 项结果",
            "sZeroRecords": "没有匹配结果",
            "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
            "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
            "sInfoPostFix": "",
            "sSearch": "搜索IP:",
            "sUrl": "",
            "sEmptyTable": "表中数据为空",
            "sLoadingRecords": "载入中...",
            "sInfoThousands": ",",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上页",
                "sNext": "下页",
                "sLast": "末页"
            },
            "oAria": {
                "sSortAscending": ": 以升序排列此列",
                "sSortDescending": ": 以降序排列此列"
            }
        },
        ajax: "${baseURL}/water/alarm_event_confirm/getData",
        columns:[
            {"data":"id"},
            {"data":"unix_alarm_time","render":function(data, type, row, meta){
                return showTime(data);
            }},
            {"data":"unix_confirm_time","render":function(data, type, row, meta){
                return showTime(data);
            }},
            {"data":"area"},
            {"data":"building"},
            {"data":"floor"},
            {"data":"device_name"},
            {"data":"device_ip"},
            {"data":"channel_number"},
            {"data":"monitor_name"},
            {"data":"alarm_type"},
            {"data":"alarm_data"},
            {"data":"unit"},
            {"data":"user"}
        ],
        searching:false,
        destroy: true,
        serverSide: true,
        ordering:false
    });

    function confirmChannelBtn(obj){
        var data = JSON.parse(decodeURIComponent(obj));
        var ip = data.device_ip;
        var channel_number = data.channel_number;
        layer.msg('确认中。。。', {
            icon: 16,shade: 0.01
        });
        $.ajax({
            type: "POST",
            contentType: "application/x-www-form-urlencoded",
            dataType: "json",
            url: "${baseURL}/water/alarm_event_confirm/confirmChannel",
            data: {"ip":ip,"channel":channel_number},
            async: true,
            success:function(data){
                layer.closeAll();
                if(data.code === 0){
                    alarmEventTable.ajax.reload();
                }
                else{
                    swal({
                        title: "操作失败。",
                        type: "error"
                    })
                }
            },
            error:function(xhr, status, error){
                console.log(xhr.responseText);
                swal({
                    title: "操作失败。",
                    type: "error"
                })
            }
        });
    }

    function confirmOneBtn(id){
        $.ajax({
            type: "GET",
            contentType: "application/json",
            dataType: "json",
            url: "${baseURL}/water/alarm_event_confirm/confirmOne?id=" + id,
            async: false,
            success:function(data){
                if(data.code === 0){
                    alarmEventTable.ajax.reload();
                }else{
                    swal({
                        title: "确认失败。",
                        type: "error"
                    });
                }
            },
            error:function(xhr, status, error){
                swal({
                    title: "请求异常。",
                    type: "error"
                })
            }
        });
    }

    function showTime(unix_time) {
        var date = new Date(unix_time * 1000);
        var year = date.getFullYear().toString();
        var month = (date.getMonth() + 1).toString();
        if(month.length < 2) month = '0' + month;
        var day = date.getDate().toString();
        if(day.length < 2) day = '0' + day;
        var h = date.getHours().toString();
        if(h.length < 2) h = '0'+ h;
        var m = date.getMinutes().toString();
        if(m.length < 2) m = '0'+ m;
        var s = date.getSeconds().toString();
        if(s.length < 2) s = '0'+ s;
        return year + '-' + month + '-' + day + ' ' + h + ":" + m +":" + s;
    }
</script>
</body>
</html>